<template>
  <keep-alive include="cityComplexInquireList">
    <router-view :key="$route.fullPath" />
  </keep-alive>
</template>

<script>
import EventBus from '@/utils/bus'
// 动态销毁
let that
const removeVnode = (targetKey) => {
  if (that.$store.getters.multiTab) {
    const vnode = that.$children.find((e) => e.$vnode.key === targetKey)
    if (vnode) {
      vnode.removeKeepAlive()
    }
  }
}
EventBus.$on('removeTab', (targetKey) => {
  removeVnode(targetKey)
})
// 刷新
// EventBus.$on('reload', (targetKey) => {
//   that.isReload = true
//   that.$nextTick(() => {
//     that.isReload = false
//   })
//   removeVnode(targetKey)
// })

export default {
  name: 'RouteView',
  props: {
    keepAlive: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      isReload: false,
      checkID: JSON.parse(localStorage.getItem('browserCacheEdit')), // 是否重新加载
      routerCache: '',
      // keepAlive: true, // 是否启用 keep-alive
    }
  },
  watch: {
    $route() {
      this.setTimeOnce()
    },
  },
  computed: {
    browserCacheEdit() {
      return JSON.parse(localStorage.getItem('browserCacheEdit')) || {}
    },
    key() {
      return this.$route.fullPath
    },
    // 判断是否需要缓存
    shouldKeepAlive() {
      const { meta } = this.$route
      const { getters } = this.$store
      return this.keepAlive || getters.multiTab || meta.keepAlive
    },
  },
  mounted() {
    this.setTimeOnce()
  },
  methods: {
    // 生成需要缓存的组件
    renderWithKeepAlivekey() {
      const len = 10
      return (
        <keep-alive include={'cityComplexInquireList'} max={len}>
          {this.isReload ? '' : <router-view />}
        </keep-alive>
      )
    },
    renderWithKeepAlive() {
      const len = 10
      this.setTimeOnce()
      return (
        <keep-alive include={'cityComplexInquireList'} max={len}>
          {/* {this.isReload ? '' : <router-view />} */}
          {this.$store.getters.CacheRouters == JSON.parse(localStorage.getItem('browserCacheEdit')).id ? (
            <router-view />
          ) : (
            <router-view key={this.$route.fullPath} />
          )}
        </keep-alive>
      )
    },
    // ifkey(){
    //   return `key={this.$route.fullPath}`
    // },
    // 生成不需要缓存的组件
    renderWithoutKeepAlive() {
      return <router-view v-once />
    },
    setTimeOnce() {
      setTimeout(() => {
        // this.$store.getters.CacheRouters = JSON.parse(localStorage.getItem('browserCacheEdit')).id
        this.$store.commit(
          'SET_CacheROUTERS',
          JSON.parse(localStorage.getItem('browserCacheEdit'))
            ? JSON.parse(localStorage.getItem('browserCacheEdit')).id
            : ''
        )
      }, 0)
      // this.routerCache = this.renderWithKeepAlive()
      // setTimeout(() => {
      // this.checkID = JSON.parse(localStorage.getItem('browserCacheEdit')).id
    },
  },
  render() {
    // return <router-view />
    const { meta } = this.$route
    const { getters } = this.$store
    // 如果 browserCacheEdit 存在且 checkID 匹配
    if (JSON.parse(localStorage.getItem('browserCacheEdit'))) {
      return this.renderWithKeepAlive()
      // return <router-view />
      // if (this.checkID === JSON.parse(localStorage.getItem('browserCacheEdit')).id) {
      //   return this.shouldKeepAlive ? this.renderWithKeepAlive() : this.renderWithKeepAlivekey()
      // } else {
      //   // 异步更新 checkID
      //   setTimeout(() => {
      //     this.setTimeOnce()
      //   }, 500)
      //   return this.renderWithKeepAlivekey()
      // }
    } else {
      // 如果没有 browserCacheEdit，根据 multiTab 和 meta.keepAlive 决定是否缓存
      if (!getters.multiTab && !meta.keepAlive) {
        return this.renderWithoutKeepAlive()
      }
      return this.shouldKeepAlive ? this.renderWithKeepAlivekey() : this.renderWithoutKeepAlive()
    }
    // that = this
    //   const {
    //     $route: { meta, fullPath },
    //     $store: { getters },
    //   } = this
    //   const len = 10
    //   const inKeep = (
    //     // <keep-alive include="['cityComplexInquireList']" max={len}>
    //     //   {this.isReload ? '' : <router-view key="['cityComplexInquireList']" />}
    //     // </keep-alive>
    //     <keep-alive include={'cityComplexInquireList'} len={len}>
    //       {/* {this.isReload ? '' : <router-view />} */}
    //       {/* <router-view key={fullPath} /> */}
    //       {this.isReload ? '' : <router-view v-once />}
    //     </keep-alive>
    //   )
    //   const noInKeep = (
    //     // <keep-alive include="['cityComplexInquireList']" max={len}>
    //     //   {this.isReload ? '' : <router-view key="['cityComplexInquireList']" />}
    //     // </keep-alive>
    //     <keep-alive include={'cityComplexInquireList'} len={len}>
    //       {/* {this.isReload ? '' : <router-view />} */}
    //       {/* <router-view key={fullPath} /> */}
    //       {this.isReload ? '' : <router-view key={fullPath} />}
    //     </keep-alive>
    //   )
    //   console.log(
    //     '111',
    //     meta,
    //     this.checkID,
    //     12,
    //     JSON.parse(localStorage.getItem('browserCacheEdit')).id,
    //     21,
    //     this.checkID == JSON.parse(localStorage.getItem('browserCacheEdit')).id
    //   )
    //   const notKeep = <router-view v-once />
    //   // 这里增加了 multiTab 的判断，当开启了 multiTab 时
    //   // 应当全部组件皆缓存，否则会导致切换页面后页面还原成原始状态
    //   // 若确实不需要，可改为 return meta.keepAlive ? inKeep : notKeep
    //   // setTimeout(() => {
    //   if (JSON.parse(localStorage.getItem('browserCacheEdit'))) {
    //     if (this.checkID == JSON.parse(localStorage.getItem('browserCacheEdit')).id) {
    //       return this.keepAlive || getters.multiTab || meta.keepAlive ? inKeep : notKeep
    //     } else {
    //       setTimeout(() => {
    //         this.checkID = JSON.parse(localStorage.getItem('browserCacheEdit')).id
    //       }, 0)
    //       return noInKeep
    //     }
    //   } else {
    //     if (!getters.multiTab && !meta.keepAlive) {
    //       return notKeep
    //     }
    //     return this.keepAlive || getters.multiTab || meta.keepAlive ? inKeep : notKeep
    //   }
    // }, 0)
  },
}
</script>
